import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {getHoursAndMinutes} from '../../../../../../helpers/utils';
import {Edit} from '../../icons';
import {
    SET_TYPE_EVENT, SET_NAME_EVENT, SET_DESC_EVENT, SET_DATE_BEGIN_EVENT,
    SET_DATE_END_EVENT, SET_TIME_BEGIN_EVENT, SET_TIME_END_EVENT, SET_CITY_EVENT,
    SET_ADDRESS_EVENT, SET_CONTACT_EVENT
} from '../../../../../../redux/eventDetail/constants';

import DefaultItem from './DefaultItem';
import DataAndTime from './DataAndTime';
import SelectItem from './SelectItem';
import {
    eventEditCancel,
    setEditStatus,
    setEventEditData,
    eventSave
} from "../../../../../../redux/eventDetail/action";


const TabInfo = props => {

    const organizationOnChange = value => {
        props.setEventEditData(SET_ADDRESS_EVENT, value);
    };
    const cityOnChange = value => {
        props.setEventEditData(SET_CITY_EVENT, value);
    };

    let eventData = props.eventData;
    const beginDateAndTime = {
        date: eventData.date &&  eventData.date.begin_date,
        time: eventData.date && getHoursAndMinutes(eventData.date.begin_date, eventData.date.begin_time)
    };
    const endDateAndTime = {
        date: eventData.date &&  eventData.date.end_date,
        time: eventData.date && getHoursAndMinutes(eventData.date.end_date, eventData.date.end_time)
    };

    const handleClickCancel = () => {
        props.eventEditCancel();
        eventData = props.eventDataOriginal;
    };
    const handleClickSave = () => {
        props.eventSave(eventData, eventData.id, '')
    };

    const items = [
        { id: 1, component: SelectItem, constant: SET_TYPE_EVENT, typeData: 'eventType', class: 'width304', typeInput: 'input', from: 'Тип события', data: props.selectList && props.selectList.types, value: eventData.type && eventData.type.id },
        { id: 2, component: DefaultItem, constant: SET_NAME_EVENT, class: 'width614', typeInput: 'input', from: 'Название', data: props.eventData.name && props.eventData.name },
        { id: 3, component: DefaultItem, constant: SET_DESC_EVENT, class: 'minHeight103 w-100', typeInput: 'textarea', from: 'Описание', data: eventData.comment && eventData.comment },
        { id: 4, component: DataAndTime, constant: [SET_DATE_BEGIN_EVENT, SET_TIME_BEGIN_EVENT], typeInput: 'input', from: 'Дата и время начала', data: beginDateAndTime},
        { id: 5, component: DataAndTime, constant: [SET_DATE_END_EVENT, SET_TIME_END_EVENT], typeInput: 'input', from: 'Дата и время окончания', data: endDateAndTime},
        {id: 6, component: DefaultItem, constant: SET_CITY_EVENT, onChange: cityOnChange, typeData: 'city', class: 'width304', typeInput: 'input', from: 'Город', data: eventData.place && eventData.place.name,},
        { id: 7, component: DefaultItem, constant: SET_ADDRESS_EVENT, onChange: organizationOnChange, typeData: 'organization', class: 'width614', typeInput: 'input', from: 'Адрес', data: eventData.location && eventData.location.name, /*coords:  */},
        { id: 8, component: SelectItem, constant: SET_CONTACT_EVENT, typeData: 'contact', class: 'width304', typeInput: 'input', from: 'Контакт для связи', data: props.selectList && props.selectList.contacts, value: eventData.contact && eventData.contact.id},
    ];
    if (props.selectList) console.log("props.selectList.contacts", props.selectList.contacts)
    return (
        <div>
            <div className="event-content-list">
                <ul className="list-unstyled">
                    {items.map((item, idx) => {
                        return <li key={idx}>
                            <item.component {...item} editStatus={props.editStatus} setEventEditData={props.setEventEditData}/>
                        </li>
                    })}
                </ul>
            </div>
            <div className="event-content-edit-block">
                {!props.editStatus ? (
                    <div className="event-content-edit-block-vn">
                        <Edit />
                        <span className="event-content-edit" onClick={props.setEditStatus}>Редактировать</span>
                    </div>
                ) : (
                    <div className="event-content-save-block">
                        <span className="event-btn event-btn-cancel" onClick={handleClickCancel}>Отменить</span>
                        <span className="event-btn event-btn-save" onClick={handleClickSave}>Сохранить</span>
                    </div>
                )}
            </div>
        </div>
    );
};

const mapStateToProps = state => ({
    eventData: state.EventDetail.eventData,
    eventDataOriginal: state.EventDetail.eventDataOriginal,
    selectList: state.EventDetail.selectList,
    editStatus: state.EventDetail.editStatus,
    cancel: state.EventDetail.cancel,
});
const mapDispatchToProps = dispatch => bindActionCreators({
    setEditStatus,
    setEventEditData,
    eventEditCancel,
    eventSave
}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(TabInfo);
